import React, { useState, useEffect } from 'react'
import { Input, Tabs, Sticky, Card, Button, Toast, Rate } from 'react-vant'
import { ArrowLeft } from '@react-vant/icons'
import { history, useLocation } from 'umi'
import axios from 'axios'
import './zhifu.css'

export default function Ping() {
    const location = useLocation()
    const [value, setValue] = useState(3);
    return (
        <div style={{ height: "100%" }}>
            <div style={{ height: "120%", background: "#e1e1e1" }}>
                <Sticky>
                    <div style={{ background: "#fff" }}>
                        <p className='fanleft' style={{ display: "inline-block" }} onClick={() => history.push('/zhi', { ids: 3 })}><ArrowLeft fontSize={25} /></p>
                        <p style={{ display: "inline-block" }}>评价</p>
                    </div>
                </Sticky>
                <div style={{ background: "#e2e2e2", paddingBottom: "5px" }}>
                    {
                        [location.state.obj].map(item => (
                            <div key={item._id} style={{ background: "#fff" }}>
                                {
                                    item.imgs.map((item2, index2) => (
                                        <div key={index2} style={{ marginBottom: "3px", height: "100px" }}>
                                            <img src={item2.img} alt="" style={{ width: "80px", display: "block", display: "inline-block", verticalAlign: "middle", marginLeft: "10px", marginTop: "15px", marginRight: "15px" }} />
                                            <div style={{ display: "inline-block", verticalAlign: "middle" }}>
                                                <p>{item2.name}</p>
                                                <p style={{ display: "inline-block", color: "red" }}>￥{item.price.toFixed(2)}
                                                </p>
                                            </div>

                                            <p style={{ display: "inline-block", float: "right", marginRight: "20px", marginTop: "30px" }}>x{item.num}</p>
                                        </div>

                                    ))
                                }
                            </div>
                        ))
                    }
                </div>
                <div>
                    <Card style={{ height: "300px" }}>
                        <p style={{ margin: "20px", display: "inline-block", verticalAlign: "middle" }}>商品评分:</p>
                        <div style={{ display: "inline-block", verticalAlign: "middle" }}><Rate value={value} onChange={setValue} /></div>
                        <p style={{ marginLeft: "20px" }}>分享你的体验吧</p>
                        <div style={{ marginLeft: "30px", marginTop: "15px" }}>
                            <Input.TextArea
                                placeholder="分享一下你的体验感"
                                maxLength={50}
                                showWordLimit={({ currentCount }) => <span style={{ marginTop: "80px" }}>已经输入{currentCount}个字啦,最多50个字</span>}
                                style={{ width: "285px", height: "120px", border: "0.3px solid gainsboro", padding: "15px" }}
                            />
                        </div>
                    </Card>
                </div>

                <Sticky position='bottom'>
                    <div style={{ height: "60px", paddingTop: "15px" }}>
                        <Button type='info' block round>
                            提交
                        </Button>
                    </div>
                </Sticky>
            </div>

        </div>
    )
}
